<script setup>
import { ref, reactive, onMounted } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
import {useRouter} from "vue-router";
import { jwtDecode } from "jwt-decode";

const username = ref("");
const code = ref("");
const password = ref("");
const key = ref("");
const keyBefore = ref("");
const remember = ref(false);
const codeImage = ref("");
const router = useRouter();

const getCodeImage = async () => {
  try {
    const response = await axios.get(`${window.link}/login/captcha?key=${keyBefore.value}`);
    if (response.data.code === 200) {
      codeImage.value = response.data.data.image;
      key.value = response.data.data.key;
      keyBefore.value = key.value;
    } else {
      console.log(response.data.message);
    }
  } catch (error) {
    console.error("获取验证码图片失败", error);
  }
};

const handleLogin = async () => {
  try {
    const data = {
      username: username.value,
      password: password.value,
      captchaKey: key.value,
      captchaCode: code.value
    }
    const response = await axios.post(`${window.link}/login/1`, data);
    if (response.data.code === 200) {
      const token = response.data.data;
      localStorage.setItem("access-token", token);
      
      // 解析 token 获取角色信息
      try {
        const decodedToken = jwtDecode(token);
        const userRole = decodedToken.role; // 确保后端 token 中包含 role 字段
        
        // 根据角色跳转到不同页面
        if (userRole === 'LANDLORD') {
          message.success("登录成功，欢迎回来");
          router.push("/home/home1");
        } else {
          message.success("登录成功，欢迎回来");
          router.push("/home/home1");
        }
      } catch (error) {
        console.error('Token 解析失败:', error);
        message.error('登录信息解析失败');
      }
    } else {
      message.error(response.data.message);
    }
  } catch (error) {
    console.error("登录信息错误", error);
  }
};

getCodeImage();
</script>
<template>
  <div>
    <a-input v-model:value="username" placeholder="请输入用户名" class="input" :bordered="false">
    </a-input>

    <a-input
      v-model:value="password"
      type="password"
      placeholder="请输入密码"
      class="input"
      :bordered="false"
    >
    </a-input>

    <a-input v-model:value="code" placeholder="请输入验证码" class="input" :bordered="false">
      <template #suffix>
        <img @click="getCodeImage" :src="codeImage" class="image" />
      </template>
    </a-input>

    <a-button
      type="primary"
      block
      class="login-btn"
      @click="handleLogin"
    >
      登录
    </a-button>
  </div>
</template>

<style scoped>
/* 通用布局 */
.input {
  height: 3rem;
  margin: 3px;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.icon {
  color: #3560a9;
}

.code-btn {
  color: #3b82f6;
  cursor: pointer;
}

.login-btn {
  font-family: "Caiyun", sans-serif; /* 使用彩云字体 */
  font-size: 20px; /* 放大字体 */
  color: #ffffff; /* 字体颜色改为白色 */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 按钮渐变背景 */
  transition: transform 0.2s ease;
}

.login-btn:hover {
  transform: scale(1.05); /* 鼠标悬停放大 */
}

.options {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
}
.register {
  text-align: center;
  font-size: 0.875rem;
  color: #9ca3af;
}

.register span {
  color: #3b82f6;
  cursor: pointer;
}
.image {
  max-height: 100%;
  max-width: 100%;
}
</style>
